<template>
	<view class="hot-lucky-bag">
		<view class="top">
			<image class="hot-title" src="~@/static/image/hot-title.png" mode="widthFix"></image>
			<notice-bar v-if="boxMsgList.length>0" class="notice-bar" :list="boxMsgList" :autoplay="autoplay">
			</notice-bar>
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in boxLists" :key="index" @click="$emit('toItemDetail',item)">
				<view v-if="item.list_label==2" class="tag hot-bg">

				</view>
				<view v-else-if="item.list_label==1" class="tag new-bg">

				</view>
				<view class="item-left">
					<image class="good"
						:src="goodsImage(strSplitArr(item.goods_image)[0]+'?x-oss-process=image/resize,w_334,m_lfit')"
						mode="widthFix"></image>

				</view>
				<view class="item-right">
					<view class="item-top">
						<view class="item-top-left flex flex-column">
							<text class="title ellipsis">{{item.goods_name}}</text>
							<!-- <text class="des ellipsis">{{item.desc}}</text> -->
							<text class="price-range">商品价值:{{$util.c_price(item.price_range)}}元</text>
						</view>
						<view class="item-top-right">
							<image class="unit-icon" src="@/static/image/coin-icon.png" mode="widthFix"></image>
							<text>{{item.price}}</text>
						</view>
					</view>
					<view class="image-list-wrapper" v-if="strSplitArr(item.goods_image).length>1">
						<image v-for="(value,index) in strSplitArr(item.goods_image).slice(1,6)" :key="index"
							class="product-img" :src="goodsImage(value+'?x-oss-process=image/resize,w_162,m_lfit')"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import NoticeBar from './NoticeBar.vue';
	import util from '@/common/js/util.js';
	export default {
		props: {
			boxLists: {
				type: Array,
				default: []
			},
			autoplay: {
				type: Boolean,
				default: true
			}
		},
		components: {
			NoticeBar
		},
		data() {
			return {
				noticeBarAutoplay: true, // 通知栏自动切换
				boxMsgList: [],
			}
		},
		created() {
			this.getOpenMsgList();
		},
		methods: {
			// 获取开盒消息
			async getOpenMsgList() {
				const res = await this.$store.dispatch('getOpenMsgList', {});
				this.boxMsgList = res;
			},
			strSplitArr(str) {
				return str.split(',');
			},
			goodsImage(img) {
				return util.img(img);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hot-lucky-bag {
		min-height: 255rpx;
		background: linear-gradient(180deg, #62B2FF, #6665FE);
		border-radius: 21rpx;
		margin: 20rpx auto 0;
		padding: 22rpx 16rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.hot-title {
				width: 278rpx;
				height: 52rpx;
			}
		}

		.list {
			margin-top: 17rpx;

			.list-item {
				position: relative;
				display: flex;
				background-color: #fff;
				padding: 20rpx;
				box-sizing: border-box;
				margin-bottom: 14rpx;
				border-radius: 21rpx;

				.item-left {
					margin-right: 21rpx;
					position: relative;
					font-size: 0;

					.good {
						width: 167rpx;
						height: 167rpx;
					}
				}

				.item-right {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.item-top {
						display: flex;
						justify-content: space-between;

						.item-top-left {
							.title {
								font-size: 28rpx;
								color: #111;
								display: block;
								width: 311rpx;
								height: 28rpx;
								line-height: 28rpx;
								font-weight: 400;
								font-family: Source Han Sans CN;
							}

							.price-range {
								margin-top: 20rpx;
								align-self: baseline;
								padding: 0 10rpx;
								line-height: 28rpx;
								background: #FFEBE8;
								border-radius: 3rpx;
								font-size: 21rpx;
								font-weight: 500;
								color: #FF6E00;
							}
						}

						.item-top-right {
							display: flex;
							justify-content: center;
							// align-items: center;
							font-size: 28rpx;
							font-weight: bold;
							color: #111111;
							margin-top: 8rpx;
							line-height: 40rpx;

							.unit-icon {
								width: 39rpx;
								height: 45rpx;
							}
						}
					}

					.image-list-wrapper {
						// padding-top: 22rpx;
						// border-top: 1rpx solid #ECECEC;
						margin-top: 19rpx;
						display: flex;
						flex-direction: row;

						.product-img {
							margin-right: 9rpx;
							height: 81rpx;
							width: 81rpx;
							/* #ifndef APP-NVUE */
							box-sizing: border-box;
							/* #endif */

							&:last-child {
								margin-right: 0;
							}
						}
					}
				}
			}
		}

		/* #ifndef APP-NVUE */
		.tag {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			width: 66rpx;
			height: 67rpx;
			z-index: 5;
		}

		.hot-bg {
			background: url("@/static/image/hot-tag-icon.png");
			background-size: 100% 100%;
		}

		.new-bg {
			background: url("@/static/image/new-tag-icon.png");
			background-size: 100% 100%;
		}

		/* #endif */
		/* #ifdef APP-NVUE */
		.tag {
			position: absolute;
			top: 10rpx;
			left: -16rpx;
			width: 69rpx;
			height: 28rpx;
			border-radius: 0px 0px 14rpx 0px;
			font-size: 24rpx;
			line-height: 28rpx;
			text-align: center;
			font-weight: 500;
			color: #FFFFFF;
			z-index: 5;
		}

		.tag-content {
			position: absolute;
			left: 0;
			bottom: 0;
			transform: translateY(100%);
			height: 0;
			width: 0;
		}

		.hot-bg {
			background: linear-gradient(90deg, #FF0863, #FF5877);
		}

		.hot-bg-content {
			border-left: 8rpx solid transparent;
			border-top: 5rpx solid #F51F56;
			border-bottom: 5rpx solid transparent;
			border-right: 8rpx solid #F51F56;
		}

		.new-bg {
			background: linear-gradient(90deg, #C96D00, #FFB53B);

		}

		.new-bg-content {
			border-left: 8rpx solid transparent;
			border-top: 5rpx solid #FBE0A3;
			border-bottom: 5rpx solid transparent;
			border-right: 8rpx solid #FBE0A3;
		}

		.tag-text {
			text-align: center;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 24rpx;
		}

		/* #endif */
	}
</style>
